<template>
  <div class="medical-appointment">
    <!-- 查询条件区域 -->
    <div class="search-section">
      <h3>查询条件</h3>
      <el-form :model="queryForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="医院名称:">
              <el-input v-model="queryForm.hospitalName" placeholder="请输入医院名称" />
<!--              <el-select v-model="queryForm.hospitalName" placeholder="全部">-->
<!--                <el-option v-for="item in hospitalNames"-->
<!--                           :key="item.value"-->
<!--                           :label="item.label"-->
<!--                           :value="item.value" />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="套餐名称:">
              <el-input v-model="queryForm.packageName" placeholder="请输入套餐名称" />
<!--              <el-select v-model="queryForm.packageName" placeholder="全部">-->
<!--                <el-option v-for="item in packageNames"-->
<!--                           :key="item.value"-->
<!--                           :label="item.label"-->
<!--                           :value="item.value" />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="人数上限:">
              <el-select v-model="queryForm.maxPatients" placeholder="请选择人数" clearable>
                <el-option
                    v-for="item in maxPatientss"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="button-group">
            <el-button @click="resetQuery">重置</el-button>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 数据列表区域 -->
    <div class="data-section">
      <h3>数据列表</h3>
      <el-table :data="medicalData" border style="width: 100%">
        <el-table-column prop="hospitalName" label="医院名称" width="180" />
        <el-table-column prop="packageName" label="套餐名称" width="180" />
        <el-table-column label="预约时间" width="180" >
          <template #default="scope">
            {{ scope.row.timePeriod }}:{{scope.row.startTime}}
          </template>
        </el-table-column>
        <el-table-column prop="maxPatients" label="人数上限" width="100">
          <template #default="{row}">
            {{ row.maxPatients }}人
          </template>
        </el-table-column>
        <el-table-column prop="registeredCount" label="已约名额" width="120">
          <template #default="{row}">
            {{ row.registeredCount }} <span v-if="row.registeredCount >= row.maxPatients" style="color: red">满员</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余名额" width="100">
          <template #default="{row}">
            {{ row.maxPatients - row.registeredCount }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="{row}">
            <el-button link type="primary" @click="viewDetails(row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页插件 ========================================== =============================== -->
    <div class="demo-pagination-block">
      <!--
                  1. current-page  ： 当前页   （重要）
                  2. page-size  : 每页显示条数（重要）
                  3. page-sizes ： 分页类型
                  4. small： 字体大小
                  5. disabled： 是否可用
                  6. background： 按钮颜色
                  7. total： 总数据条数（重要）

          -->
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 3, 4, 5]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"></el-pagination>
    </div>
    <!-- 分页插件 ========================================== =============================== -->

  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
import axios from "axios";
import {router} from "@/router/index.js";


// 分页模型定义=======================================================================
let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);
const handleSizeChange = (val) => {
  pageSize.value = val;
  getMedicalData();
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  getMedicalData();
}
// 分页模型定义=======================================================================


// 体检预约数据
const medicalData = ref([])
const getMedicalData=()=>{
  axios.get(`/doctorSchedule/getMedicalData/${pageNum.value}/${pageSize.value}`).then(res=>{
    medicalData.value = res.data.obj.data;
    total.value = res.data.obj.total
  })
}
// 医院名称=====================================================
// const hospitalNames= ref([])
// const getHospitalNames=()=>{
//   axios.get(`/doctorSchedule/getHospitalNames`).then(res=>{
//     hospitalNames.value = res.data.obj.map(item=>({
//       value: item.id || item.value || item,
//       label:  item.name || item.label || item
//     }))
//   })
// }
// 医院名称=====================================================

//  套餐名称=====================================================
// const packageNames= ref([])
// const getPackageNames=()=>{
//   axios.get(`/doctorSchedule/getPackageNames`).then(res=>{
//     packageNames.value = res.data.obj.map(item => {
//       if (typeof item === 'object') {
//         return {
//           value: item.id,  // 使用 id 作为 value
//           label: item.packageName || item.name || '未知套餐'  // 确保 label 是字符串
//         }
//       } else {
//         return {
//           value: item,  // 字符串直接作为 value
//           label: item   // 字符串直接作为 label
//         }
//       }
//     })
//   })
// }
//  套餐名称=====================================================

//人数上限====================================================================
const maxPatientss = ref([])
const getMaxPatients = () => {
  axios.get('/doctorSchedule/getMaxPatientsOptions').then(res => {
    maxPatientss.value = res.data.obj.map(item=>({
      value: item.id || item.value || item,
      label:  item.name || item.label || item
    }))
  })
}
//人数上限====================================================================

onMounted(()=>{
  getMedicalData();
  getMaxPatients();
})
// 查询操作
// 查询表单
const queryForm = reactive({
  hospitalName: '',
  packageName: '',
  maxPatients: null
})
const handleQuery = () => {
  // 构造符合Hospital对象的查询参数
  const searchParams = {
    packageName: queryForm.packageName,
    hospitalName: queryForm.hospitalName,
    maxPatients: queryForm.maxPatients
  }

  axios.post(`/doctorSchedule/searchDoctorSchedule/${pageNum.value}/${pageSize.value}`, searchParams, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    medicalData.value = res.data.obj.records;
    total.value = res.data.obj.total
    ElMessage.success('查询成功')
  }).catch(error => {
    ElMessage.error('查询失败: ' + error.message)
  })
}

// 重置查询
const resetQuery = () => {
  queryForm.hospitalName = '';
  queryForm.packageName = '';
  queryForm.maxPatients = '';
  getMedicalData()
}

// 查看明细
const viewDetails = (row) => {
  router.push(`/MedicalDetail/${row.id}`)
}
</script>

<style scoped>
.medical-appointment {
  padding: 0 10px;
}

.search-section {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.data-section {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-section h3 {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.button-group {
  text-align: right;
  padding-right: 10px;
}

.el-table {
  margin-top: 10px;
}
</style>